<template>
<div>
  <div>
    <!-- 搜索栏 -->
    <div  class="search">
<!--     <el-button  @click="saveUser" style="float: right;margin-top: 10px;margin-right: 50px;" type="primary">添加报名信息</el-button>-->
      <ul>
        <li>
          <el-input placeholder="请输入内容" v-model="params.key" clearable width="200">
            <el-button slot="append" icon="el-icon-search" @click="getRegisterList"></el-button>
          </el-input>
        </li>
        <li>
          <el-input placeholder="比赛 ID" v-model="params.contestId" clearable width="200">
            <el-button slot="append" icon="el-icon-search" @click="getRegisterList"></el-button>
          </el-input>
        </li>
        <li >
          <el-select v-model="params.status"  :placeholder="'状态'" @change="getRegisterList">
            <el-option :label="'可用'" value="0"></el-option>
            <el-option :label="'不可用'" value="1"></el-option>
            <el-option :label="'不限'" value=""></el-option>
          </el-select>
        </li>

      </ul>




    </div>
    <!--    数据-->
    <el-table :data="registerTableData"  style="width: 97%" height="580" @sort-change="sortChange">


      <el-table-column fixed prop="id" label="ID" width="120">
        <template slot-scope="scope">
          <el-tooltip :content="scope.row.id" placement="bottom" effect="light">
            <!--            <el-button>Light</el-button>-->
            <span>{{scope.row.id.substring(0,10)}}</span>

          </el-tooltip>

        </template>
      </el-table-column>
      <el-table-column fixed prop="username" label="用户名" sortable="custom">
        <template slot-scope="scope">
          <span style="color: #c177e7">{{scope.row.username}}</span>
        </template>

      </el-table-column>



      <el-table-column prop="status" label="状态" width="120">
        <template slot-scope="scope">
          <span v-if="scope.row.status==0" style="color: #25bb9b">可用</span>
          <span v-else-if="scope.row.status==1" style="color: #afafaf"> 不可用</span>
          <span v-else style="color: red;"></span>
        </template>
      </el-table-column>

      <el-table-column
          prop="schoolName"
          label="学校"
          width="150">
      </el-table-column>


      <el-table-column prop="create_time" label="创建时间" width="150" sortable="custom">
        <template slot-scope="scope">
          <span style="color: #8e99a1">{{scope.row.createTime}}</span>
        </template>
      </el-table-column>


      <el-table-column
          fixed="right"
          label="操作"
          width="120">
        <template slot-scope="scope">
          <el-button v-show="scope.row.status==0" @click="updateRegister(scope.row)" type="text" size="small" style="color: red;">拉黑</el-button>
          <el-button v-show="scope.row.status==1" @click="updateRegister(scope.row)" type="text" size="small" style="color: greenyellow;">恢复</el-button>
          <el-button type="text" size="small" style="color: #e6a23c" @click="deleteRegister(scope.row)">取消报名</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--分页-->
    <div class="page">
      <el-pagination
          background
          layout="prev, pager, next"
          :total="total"
          :page-size="params.size"
          @current-change="chg"
      >
      </el-pagination>
    </div>
  </div>


</div>
</template>

<script>
import * as contestApi from '@/api/contest'
import {getEasyUserById,loginUpdateById} from '@/api/admin'
import * as userApi from "@/api/admin";
export default {
  name: "Register",
  data(){
    return{
      registerTableData:[],
      total:0,
      params:{
        page:1,
        size:20,
        contestId:null,
        userId:null,
        status:null,
      },
      userNames:{},
    }
  },
  methods:{
    //当页数发生变化时执行
    chg(curpage) {
      //更新查询的页数
      this.params.page = curpage;
      //重新查询
      this.getRegisterList();
    },
    // 自定义排序
    sortChange(column,prop,order){
      // console.info(column);
      this.params.field = column.prop;
      this.params.order = column.order;
      if(this.params.order){
        if(this.params.order[0]=='a')this.params.order = "asc";
        else this.params.order = "desc";
      }else{  this.params.order = "";this.params.field = ''}
      // console.info(this.params)
      this.getRegisterList();
    },
    deleteRegister(item){  //取消报名、删除
      this.$confirm(this.$t('problemMode.case.deleteWarnBefore')+item.username+" 的报名信息"+this.$t('problemMode.case.deleteWarnAfter'), this.$t('prompt'), {
        confirmButtonText: this.$t('save'),
        cancelButtonText: this.$t('cancel'),
        type: 'warning'
      }).then(() => {
        contestApi.cancelRegister({"userId":item.userId,"id":item.contestId}).then(res=>{
          if(res.data.success){
            this.$message({ type: 'success', message: '取消报名成功!' });
            this.registerTableData();
          }
        })
      })

    },
    updateRegister(item){
      if(item.status==0)item.status=1;
      else item.status = 0;
      contestApi.updateRegister(item).then(res=>{
        if(res.data.success){
          this.$message(item.status==0?"已恢复":"已拉黑该用户");
        }
      })
    },

    getRegisterList(){
      contestApi.getContestRegisterSearch(this.params).then(async res=>{
        var tables = res.data.data.dataList;
        //获取用户名字
        for(var i = 0;i<tables.length;i++){
          // console.info(tables[i].userId)
          if(!this.userNames[tables[i].userId]){
            await getEasyUserById({"id":tables[i].userId}).then(async res2=>{
              if(res2.data.data&&res2.data.data.username){
                // console.info("success="+res2.data.data.id);
                this.userNames[res2.data.data.id] =   res2.data.data.username;

                if(res2.data.data.username!=tables[i].username||res2.data.data.school !=tables[i].schoolName){ //更新username
                  console.info("发送更新用户："+tables[i].username +" 的请求")
                  await contestApi.updateRegisterUser({"userId":tables[i].userId}).then(res=>{});
                }
                tables[i].username = res2.data.data.username;
                tables[i].schoolName = res2.data.data.school
              }else{
                this.userNames[tables[i].userId] =  '<span style="color:grey">用户已注销</span>';
              }
            });
          }
        }
        this.registerTableData = tables;
        this.total = res.data.data.total;
      })
    },
  },
  created() {
    Object.assign(this.params,this.$route.query)
    this.getRegisterList();
  }

}
</script>

<style scoped>
.search > ul > li{
  list-style: none;
  display:inline-block;
  text-align: left;
  width: 15.625rem;
  margin: .625rem;
}
.search > ul{
  /* margin: .625rem; */
  padding: 0px;
  /* margin: 0px; */
  margin-bottom: 20px;
  text-align: left;
  /* width: 55rem; */
}
</style>
